<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>头部加载的进度条</title>
	<style type="text/css">
			.loading{
		width:100%;
		height:100%;
		position:fixed;
		top:0;left:0;
		z-index:100;
		background-color:white;
	}
	.loading .pic{
		width:0%;
		height:5px;
		position:absolute;
		top:0;
		left:0;
		background: red;
	}
	</style>
</head>
<body>
<div class="loading">
	<div class="pic">
		
	</div>
</div>
<header>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
</header>
<script type="text/javascript">
	$(".loading .pic").animate({width:"10%"},100)
</script>
<section>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
</section>
<script type="text/javascript">
	$(".loading .pic").animate({width:"30%"},100)
</script>
<section>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
</section>
<script type="text/javascript">
	$(".loading .pic").animate({width:"50%"},100)
</script>
<section>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
</section>
<script type="text/javascript">
	$(".loading .pic").animate({width:"80%"},100)
</script>
<section>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">
</section>
<script type="text/javascript">
	$(".loading .pic").animate({width:"90%"},100)
</script>
<footer>
	<img src="http://img4.duitang.com/uploads/item/201607/29/20160729100855_Ph4Fz.thumb.700_0.jpeg" alt="">	
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(".loading .pic").animate({width:"100%"},100,function(){
		$(".loading").fadeOut();
	})
</script>
</body>
</html>